<template>
  <div class="grid-box full">
    <div class="actions">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </div>
    <el-tabs type="border-card" tab-position="bottom" class="full content">
      <el-tab-pane label="设计">
        Route
      </el-tab-pane>
      <el-tab-pane label="源码">
        <VueJsonPretty v-model:data="defaultData"
          v-model:selected-value="selectedValue"
          show-line-number
          show-icon
          editable
          show-select-controller
          :node-selectable="() => true"
          selectableType="multiple"
          class="full"
          @node-click="onNodeClick"
          @node-mouseover="onNodeMouseover"
          @icon-click="onIconClick"
          @brackets-click="onBracketsClick"
          @selected-change="onSelectedChange"
        >
          <template #renderNodeValue="{ node, defaultValue }">
            {{ defaultValue }}
            <ElButton link @click="() => {delete defaultData[node.key]}">删除</ElButton>
          </template>
        </VueJsonPretty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
  import { h, ref, watch } from 'vue'
  import { ElDatePicker, ElCalendar, ElTabs, ElTabPane, ElButton } from 'element-plus'
  import { open } from '@/components/Popup'
  // import { JsonEditor } from '@/components/JsonEditor'
  import VueJsonPretty from 'vue-json-pretty'
  import 'vue-json-pretty/lib/styles.css'

  const defaultData = ref({
    title: '标题',
    content: '内容',
    num: 22
  })

  const selectedValue = ref()
  watch(() => selectedValue.value, (val) => console.log('selectedValue==', val))

  function onNodeClick(node) {
    console.log('onNodeClick', node)
  }

  function onNodeMouseover(node) {
    console.log('onNodeMouseover', node)
  }

  function onBracketsClick(collapsed, node) {
    console.log('onBracketsClick', collapsed, node)
  }

  function onIconClick(collapsed, node) {
    console.log('onIconClick', collapsed, node)
  }

  function onSelectedChange(newVal, oldVal) {
    console.log('onSelectedChange', newVal, oldVal)
  }

  const value = ref()

  const onClick = () => {
    open({width: '800px', title: '日历的国际化问题'}, ElCalendar)
  }
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 35px minmax(0, 1fr);
    grid-template-areas: 'actions' 'content';
    row-gap: 10px
  }
  .actions {
    grid-area: actions;
    display: flex;
    align-items: center;
  }
  .content {
    grid-area: content;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 79px);
  }
</style>